<template>
  <div class="bill home-bill-container">
    <HeaderTop title="Bill" :showBack="false"></HeaderTop>
    <div class="top">
      <div class="nav-bar">
        <p :class="{ 'nav-bar-item': true, 'active': status == 3 }" @click="changStatus(3)">
          Repayment
        </p>
        <p :class="{ 'nav-bar-item': true, 'active': status == 4 }" @click="changStatus(4)">
          Finish
        </p>
        <p :class="{ 'nav-bar-item': true, 'active': status == 1 }" @click="changStatus(1)">
          Pending
        </p>
        <div :class="{ 'nav-bar-item': true, 'active': status == 2 }" @click="changStatus(2)">
          <div>Fail</div>
          <div class="border"></div>
        </div>
      </div>
    </div>

    <PullRefresh v-model="loading" @refresh="onRefresh">
      <div class="order-list" v-if="orderList.length > 0">
        <div class="product-table-header" />
        <div :class="{ 'order-list-item': true, 'delay': item.step == 'delay', 'finish': status == 4, 'fail': status == 2 }"
          v-for="(item, index) in orderList" :key="index" @click="returnTo(item)">

          <p class="name">{{ item.productName }}</p>

          <div class="order-list-content">
            <!-- <div class="content-left" /> -->
            <div class="content-middle" :class="{ 'order-fail': status == 2 }">
              <p class="amount" :class="{ delay: item.step == 'delay' }"><span>₱ </span>{{ item.amount | formatCurrency(',') }}</p>
              <p class="loan-amount-title">Loan Amount</p>
            </div>
            <div class="content-right">
              <div v-if="status == 3">
                <!-- 逾期还款 -->
                <!-- <i class="custom-icon" /> -->
                <div v-if="item.step == 'delay'" class="common late">Overdue repay </div>
                <!-- 去还款 -->
                <!-- <i class="custom-icon" /> -->
                <div v-else class="common">Repayment </div>
              </div>
              <!-- <i class="custom-icon" /> -->
              <!-- 进行中 -->
              <div v-if="status == 1" class="common pend">In Progress </div>

            </div>
          </div>

          <div class="delay-time">
            <div v-if="item.step == 'delay'">
              Expiry date : {{ item.expireTime | formatDate('MM-dd-yyyy') }}
            </div>
            <div v-if="status == 1">
              Apply time : {{ item.loanTime | formatDate('MM-dd-yyyy') }}
            </div>
            <div v-if="status == 4">
              Complete time : {{ item.repayCompletionTime | formatDate('MM-dd-yyyy') }}
            </div>
            <!-- 拒绝 -->
            <div v-if="status == 2" class="fail">
              Please apply again in {{ item.frozenDays }} days
            </div>
          </div>
        </div>
        <div class="product-table-bottom"  />
      </div>
      <div class="no-order" v-else>
        <img src="~@/assets/imgs/order/no-order.png" alt="">
        <div>you have no record of application</div>
      </div>
    </PullRefresh>

  </div>
</template>
<script>
import HeaderTop from '@/components/header-top';
import { PullRefresh } from 'vant';

export default {
  components: {
    HeaderTop,
    PullRefresh
  },
  data() {
    return {
      status: 3,
      orderList: [],
      orderList2: [
        {
          amount: '500.00',
          "offset": 0,
          "orderNo": "782732221373136896",
          "status": 1,
          "contractAmount": 3500.00,
          "loanPeriod": 7,
          "loanTime": 1669963710011,
          "lateDays": 0,
          "overDueAmount": null,
          "productId": 221017003,
          "productName": "VIP1",
          step: 'delay'
        },
        {
          amount: '8888.00',
          "offset": 0,
          "orderNo": "782732221373136896",
          "status": 1,
          "contractAmount": 3500.00,
          "loanPeriod": 7,
          "loanTime": 1669963710011,
          "lateDays": 0,
          "overDueAmount": null,
          "productId": 221017003,
          "productName": "VIP1",
        }
      ],
      loading: false,
      pageTrackerInfo: {
        page: 'bill',
        startTime: new Date().getTime()
      }
    }
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.getOrderList()
      }, 1000);
    },
    returnTo(obj) {
      if (this.status == 3 || this.status == 1) {
        // 账单页 - 待还款产品 - 点击
        this.$buryPoint.action({
          eventName: 'bill_page_click',
          eventValue: {
            orderId: obj.orderNo || ''
          },
          ...this.pageTrackerInfo
        });
        let type = this.status == 3 ? 'repay' : this.status == 1 ? 'pending' : "";
        this.$router.push({
          path: '/orderDetailInfo',
          query: { orderId: obj.orderNo, type: type, productId: obj.productId }
        })
      }
    },
    changStatus(status) {
      this.status = status;
      this.getOrderList();
    },
    getOrderList() {
      if (false) {
        this.orderList = [
          {
            "offset": 0,
            "orderNo": "782732221373136896",
            "status": 1,
            "contractAmount": 3500.00,
            "loanPeriod": 7,
            "loanTime": 1669963710011,
            "lateDays": 0,
            "overDueAmount": null,
            "productId": 221017003,
            "amount": 3000,
            "productName": "VIP1",
            step: 'delay'
          },
          {
            "offset": 0,
            "orderNo": "782732221373136896",
            "status": 1,
            "contractAmount": 3500.00,
            "loanPeriod": 7,
            "loanTime": 1669963710011,
            "lateDays": 0,
            "amount": 3000,
            "overDueAmount": null,
            "productId": 221017003,
            "productName": "VIP1",
          }
        ]
      }
      let params = {
        status: this.status
      };
      this.$api.orderList(params).then(res => {
        let { phone } = this.$storage.get('user');
        // @todo delete zhanming test-code
        if (phone == '09453678670') {
          // if(phone=='09363992256'){
          res = {
            data: [],
            error: "00000000",
            msg: "",
            status: "1",
          };
          if (params.status == 1) {
            res.data = [
              {
                "offset": 0,
                "orderNo": "782732221373136896",
                "status": 1,
                "contractAmount": 3500.00,
                "loanPeriod": 7,
                "loanTime": 1694672557882,
                "lateDays": 0,
                "overDueAmount": null,
                "productId": 221017003,
                "productName": "VIP1",
              }
            ]
          }
        }
        let { status, error, data } = res;
        this.loading = false;
        if (status == 1 && error == '00000000') {
          data.forEach(item => {
            //逾期
            if (item.expireTime < Date.now() && this.status == 3) {
              item.step = 'delay';
              item.amount = item.contractAmount / 1 + item.overDueAmount / 1
            } else {
              item.amount = item.contractAmount
            }
          });
          this.orderList = data
        };
      })
    }
  },
  created() {
    this.getOrderList()
  },
  beforeDestroy () {
    this.pageEndAction()
  },
  mounted () {
    this.pageStartAction()
    // 账单页页面曝光
    this.$buryPoint.action({
      eventName: 'bill_page_show',
      ...this.pageTrackerInfo
    });
  }
};
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
